<!-- 金币余额 -->
<template>
	<view class="page_box">
		<view class="head_box">
			 
			<view class="head_box u-flex u-row-center u-col-center">
				<view class="card-box">
					<view class="card-head u-flex u-col-center">
						<view class="card-title u-m-r-10">金币总额</view>
						<view @tap="showMoney = !showMoney" class="u-iconfont"
							style="color: #fff;font-size: 46rpx;"></view>
					</view>
					<view class="card-head u-flex  uni-row u-p-t-40" style="-webkit-flex: 1;flex: 1;">
						<view style="-webkit-flex: 1;flex: 1; " class="money-num" >
							 {{  coins?coins:'0' }}</view>
						<view style="-webkit-flex: 1;flex: 1;" class="card-head u-flex">
							 
						 
						</view>
					</view>
					<!-- <button class="u-reset-button withdraw-btn"
						@tap="$Router.push('/pages/user/wallet/withdraw')">提现</button> -->
				</view>
			</view>

			<view class="tab-box u-flex">
				<view class="tab-item u-flex u-row-center " @tap="onTab('all')"><view class="tab-name" :class="{ 'tab-active': tabCur === 'all' }">全部</view></view>
				<!-- <view class="tab-item u-flex u-row-center" @tap="onTab('credit')"><view class="tab-name" :class="{ 'tab-active': tabCur === 'add' }">收入</view></view>
				<view class="tab-item u-flex u-row-center" @tap="onTab('debit')"><view class="tab-name" :class="{ 'tab-active': tabCur === 'reduce' }">支出</view></view> -->
			</view>
		</view>
		<view class="content_box">
			<scroll-view scroll-y="true" @scrolltolower="loadMore" class="scroll-box">
				<view class="item-box u-flex u-row-between" v-for="log in scoreLog" :key="log.id">
					<view class="u-flex-col">
						<view class="name">{{ log.typeLanguageValue }}</view>
						<view class="time">{{ $u.timeFormat(log.createdDate) }}</view>
					</view>
					<view class="u-flex-col">
						<view class="name">本次调整</view>
						<view class="num font-OPPOSANS" v-if="log.debit > 0">-{{log.debit }}</view>
						<view class="num font-OPPOSANS" v-else>{{ log.credit }}</view>
					</view>
					<view class="u-flex-col">
						<view class="name">当前金币 </view>
							<view class="num font-OPPOSANS" >{{ log.balance }}</view>
					</view>
					
				 
				</view>
				<!-- 空置页 -->
				<ljshop-empty v-if="isEmpty" marginTop="200rpx" :image="$IMG_URL + '/imgs/empty/comment_empty.png'" tipText="暂无数据~"></ljshop-empty>
				<!-- 更多 -->
				<u-loadmore v-if="scoreLog.length" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
			</scroll-view>
		</view>
	</view>
</template>

<script>
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
export default {
	components: {},
	data() {
		return {
			isEmpty: false,
			tabCur: 'all',
			scoreLog: [],
			loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
			currentPage: 0,
			lastPage: 1,
			count:0,
			allpoint:0,
			avaliabpoint:0,
			frozepoint:0,
			coins:0
			
		};
	},
	computed: {
		...mapGetters(['userInfo'])
	},
	onLoad() {
		this.getScoreLog();
		this.getScore();
	},
	methods: {
		loadMore() {
			
				this.currentPage += 1;
				this.getScoreLog();
			
		},
		onTab(type) {
			if (this.tabCur !== type) {
				this.tabCur = type;
				this.scoreLog = [];
				this.currentPage = 0;
				this.getScoreLog();
				
			}
		},
		// 金币明细
		getScore() {
			let that = this;
			that.loadStatus = 'loading';
			that.$http('money.walletcount', {
				UId: uni.getStorageSync("UId"),
			}).then(res => {
				
					 this.coins = res.coins
			});
		},
		getScoreLog(type) {
			let that = this;
			that.loadStatus = 'loading';
			that.$http('money.coinstLog', {
				UId: uni.getStorageSync("UId"),
				page: that.currentPage
			}).then(res => {
			 that.loadStatus = 'loadmore';
		
			 
				 
					if(that.currentPage==0){
						that.scoreLog =res;
					}
					if(that.currentPage>0&&res.length>0){
					
						that.scoreLog =that.scoreLog.concat(res);
					}
					//console.info(JSON.stringify(that.scoreLog))
				 
			});
		}
	}
};
</script>

<style lang="scss">
.page_box {
	.flex-item {
		width: 33.3%;
		height: 200rpx;
		text-align: center;
		line-height: 200rpx;
	}
	
	.flex-item-V {
		width: 100%;
		height: 150rpx;
		text-align: center;
		line-height: 150rpx;
	}
	
	.text {
		margin: 15rpx 10rpx;
		padding: 0 20rpx;
		background-color: #ebebeb;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		color: #777;
		font-size: 26rpx;
	}
	
	.desc {
		/* text-indent: 40rpx; */
	}
	
	.flex-pc {
		display: flex;
		justify-content: center;
	}
	
	.wallet-list {
		width: 750rpx;
		padding: 30rpx;
		background-color: #ffff;
		border-bottom: 1rpx solid #eeeeee;
	
		.head-img {
			width: 70rpx;
			height: 70rpx;
			border-radius: 50%;
			background: #ccc;
		}
	
		.list-content {
			justify-content: space-between;
			align-items: flex-start;
			flex: 1;
	
			.title {
				font-size: 28rpx;
				color: #333;
				width: 400rpx;
			}
	
			.time {
				color: #c0c0c0;
				font-size: 22rpx;
			}
		}
	
		.money {
			font-size: 28rpx;
			font-weight: bold;
	
			.add {
				color: #7063d2;
			}
	
			.minus {
				color: #333333;
			}
		}
	}
	
	// 钱包
	.head_box {
		width: 750rpx;
		background-color: #fff;
		padding: 30rpx 0;
	
		.card-box {
			width: 690rpx;
			min-height: 300rpx;
			padding: 40rpx;
			background: url('https://image.hzwltb69.com/app/images/money_wallet_bg.png') no-repeat;
			background-size: 100% 100%;
			box-shadow: 1rpx 5rpx 16rpx 0 rgba(94, 73, 195, 0.81);
			border-radius: 30rpx;
			overflow: hidden;
			position: relative;
	
			.card-head {
				color: #fff;
				font-size: 30rpx;
			}
	
			.money-num {
				font-size: 70rpx;
				line-height: 70rpx;
				font-weight: 500;
				color: #ffffff;
			}
	
			.reduce-num {
				font-size: 26rpx;
				font-weight: 400;
				color: #ffffff;
			}
	
			.withdraw-btn {
				width: 120rpx;
				height: 60rpx;
				line-height: 60rpx;
				background: #ffffff;
				border-radius: 30px;
				font-size: 24rpx;
				font-weight: 500;
				color: #5848c4;
				position: absolute;
				right: 30rpx;
				top: 40rpx;
			}
	
			.topup-btn {
				width: 120rpx;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 30px;
				font-size: 24rpx;
				font-weight: 500;
				color: #fff;
				border: 1px solid #fff;
				position: absolute;
				right: 180rpx;
				top: 40rpx;
			}
		}
	}
	
	// 筛选
	
	.filter-box {
		height: 120rpx;
		padding: 0 30rpx;
		background-color: #f6f6f6;
	
		.date-btn {
			background-color: #fff;
			line-height: 54rpx;
			border-radius: 27rpx;
			padding: 0 20rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #666666;
		}
	
		.total-box {
			font-size: 24rpx;
			font-weight: 500;
			color: #999999;
		}
	}
	
	// 分类
	.state-item {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		border-bottom: 1rpx solid rgba(#999, 0.5);
	
		.state-title {
			color: #666;
			font-weight: 500;
			font-size: 28rpx;
			line-height: 90rpx;
		}
	
		.title-active {
			color: #333;
		}
	
		.underline {
			display: block;
			width: 68rpx;
			height: 4rpx;
			background: #fff;
			border-radius: 2rpx;
		}
	
		.underline-active {
			background: #5e49c3;
			display: block;
			width: 68rpx;
			height: 4rpx;
			border-radius: 2rpx;
		}
	}
	background: #fff;
	.head_box {
		width: 750rpx;
	
		background: linear-gradient(180deg, rgba(239, 196, 128, 1) 0%, rgba(248, 220, 165, 1) 40%, rgba(255, 255, 255, 1) 100%) no-repeat;
		position: relative;
		.all-box {
	 
			padding-bottom: var(--status-bar-height);
			.all-num {
				font-size: 50rpx;
				font-weight: 500;
				color: #a8700d;
				margin-bottom: 20rpx;
			}
			.all-title {
				font-size: 24rpx;
				font-weight: 500;
				color: rgba(168, 112, 13, 1);
			}
			.score-card-bg {
				width: 100%;
				height: 90rpx;
			}
		}
		.tab-box {
			position: absolute;
			left: 50%;
			bottom: 0;
			transform: translateX(-50%);
			width: 710rpx;
			height: 90rpx;
			background: rgba(255, 255, 255, 1);
			border-radius: 30rpx 30rpx 0px 0px;
			border-bottom: 1rpx solid #dfdfdf;
			padding: 0 30rpx;
			.tab-item {
				flex: 1;
				.tab-name {
					display: inline-block;
					font-size: 30rpx;
					font-family: Noto Sans S Chinese;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
					border-bottom: 4rpx solid transparent;
					line-height: 86rpx;
				}
				.tab-active {
					border-bottom: 4rpx solid rgba(213, 166, 90, 1);
				}
			}
		}
	}
}
.item-box {
	background: #fff;
	min-height: 150rpx;
	border-bottom: 1rpx solid #dfdfdf;
	padding: 30rpx;
	.name {
		font-size: 28rpx;

		font-weight: 500;
		color: rgba(102, 102, 102, 1);
		line-height: 28rpx;
		margin-bottom: 20rpx;
	}
	.time {
		font-size: 24rpx;

		font-weight: 500;
		color: rgba(196, 196, 196, 1);
		line-height: 24px;
	}
	.num {
		font-size: 30rpx;

		font-weight: 500;
		color: #e6b873;
	}
}
</style>
